<%@ page contentType="text/html;charset=UTF-8" language="java" %>
<%@ taglib prefix="c" uri="http://java.sun.com/jsp/jstl/core" %>
<%@ taglib prefix="sf" uri="http://www.springframework.org/tags/form" %>
<c:set var="ctx" value="${pageContext.request.contextPath}"/>
<!DOCTYPE html>
<html>

<head>
    <title>路线管理</title>


    <style>
        .side-menu {
            margin-top: 50px;
        }
    </style>

</head>

<body>



    <div class="container">
        <div div="row">

            <div class="col-sm-10">
                <div class="row">

                    <div class="panel panel-default">

                        <div class="panel-heading">路线管理</div>
                        <div class="panel-body">
                            <div class="row">
                                <div class="col-sm-offset-1 col-sm-10">

                                    <form id="idLineQueryForm" class="form-inline" role="form" method="post" action="">

                                        <label for="inputStartLocation" class="control-label">始发:</label>

                                        <div class="input-group">
                                            <input id="inputStartLocation" type="text" class="form-control " placeholder="" readonly/>
                                            <input id="inputStartLocationHidden" type="hidden" name="startLocationId">
                                            <div class="input-group-btn">
                                                <button id="btnStartLocation" class="btn btn-default" type="button">
                                                    <span class="glyphicon glyphicon-globe"></span>
                                                </button>
                                            </div>
                                        </div>

                                        <label class="control-label">终点:</label>
                                        <div class="input-group">
                                            <input id="inputEndLocation" type="text" class="form-control " placeholder="" disabled/>
                                            <input id="inputEndLocationHidden" type="hidden" name="endLocationId">
                                            <div class="input-group-btn">
                                                <button id="btnEndLocation" class="btn btn-default" type="button">
                                                    <span class="glyphicon glyphicon-globe"></span>
                                                </button>
                                            </div>
                                        </div>

                                        <label class="control-label" >状态:</label>
                                        <select id="idSelectLineStatus" class="form-control">
                                            <option value="0">--状态--</option>
                                            <option value="1">审核</option>
                                            <option value="2">未审核</option>
                                        </select>

                                        <button type="submit" class="btn btn-warning">查询</button>
                                        <button type="reset" class="btn btn-default">重置</button>
                                        <button type="button" class="btn btn-success" onclick="window.location='${ctx}/workbench/line/add'">新增</button>



                                    </form>

                                </div>
                            </div>

                        </div>
                    </div>

                </div>
                <div class="row">

                    <!--线路列表-->
                    <table class="table table-bordered table-hover" data-toggle="table">
                        <thead>
                            <tr>
                                <th>始发</th>
                                <th>终点</th>
                                <th>单双向</th>
                                <th>时效</th>
                                <th>报价</th>
                                <th>是否推广</th>
                                <th>状态</th>
                                <th>操作</th>
                            </tr>
                        </thead>
                        <tbody id="idLinesBody">

                        </tbody>
                    </table>

                </div>
                <div class="row">
                    <!--                    <span class="pull-right">第1-20条记录，共100条记录</span>-->
                    <ul class="pagination pagination-sm pull-left">
                        <li class="disabled"><a href="#">&laquo;</a></li>
                        <li class="active"><a href="#">1</a></li>
                        <li><a href="#">2</a></li>
                        <li><a href="#">3</a></li>
                        <li><a href="#">4</a></li>
                        <li><a href="#">5</a></li>
                        <li><a href="#">&raquo;</a></li>
                    </ul>

                </div>
            </div>

        </div>
    </div>




    <!-- Large modal -->

    <div id="myRegionSelectorModal" class="modal fade bs-example-modal-lg" tabindex="-1" role="dialog" aria-labelledby="myLargeModalLabel" aria-hidden="true">
        <div class="modal-dialog modal-lg">
            <div class="modal-content">
                <div class="modal-header">
                    <button type="button" class="close" data-dismiss="modal"><span aria-hidden="true">&times;</span><span class="sr-only">Close</span></button>
                    <h4 class="modal-title">地区选择</h4>
                </div>
                <div class="modal-body">
                    <div class="container" id="divRegionSelector"></div>
                </div>

            </div>
        </div>
    </div>


    <%--<script src="../../../statics/js/jquery-3.1.1.min.js"></script>--%>
    <%--<script src="../../../statics/bootstrap/js/bootstrap.min.js"></script>--%>
    <script src="${ctx}/statics/echarts/echarts.min.js"></script>
    <script src="${ctx}/statics/js/regionselector.js"></script>

    <script>
        $(function () {

            $("#linemanagement-tab").addClass("active");

            //------------------------------------------------------------------------------------------------
            //查询
            $("#idLineQueryForm").submit(function(e){
                e.preventDefault();
                var params={};
                var startLocationId=$("#inputStartLocationHidden").val();
                var endLocationId=$("#inputEndLocationHidden").val();
                var status = $("#idSelectLineStatus").val();
                $.isNumeric(startLocationId)? params["startLocationId"]=startLocationId:null;
                $.isNumeric(endLocationId)? params["endLocationId"]=endLocationId:null;
                $.isNumeric(status)? params["status"]=status:null;
                showLinesList(params);
            });
            $("#idLineQueryForm").one('reset',function(e){
                $("#inputStartLocationHidden").val('');
                $("#inputEndLocationHidden").val('');
                $("#idSelectLineStatus").val('0');
                showLinesList();
            });
            //------------------------------------------------------------------------------------------------
            //获取线路
            var showLinesList  = function(params){
                var requestUrl = '${ctx}/workbench/lines';
                var queryParams={startIndex:1,endIndex:10000};
                if(params!=null&&params!=""&&params!=undefined){
                    queryParams['params']=params;;
                }

                $.ajax({
                    url:requestUrl,
                    type: 'post',
                    contentType: 'application/json;charset=UTF-8',
                    dataType: 'json',
                    data:JSON.stringify(queryParams),
                    success: function (result, textStatus, jqXHR) {
                        console.log(result);
                        var data = result.data;

                        var htmlStr ="";
                        $(data).each(function(index,item){
                            var priceStr ="";
                            $(item.prices).each(function(index,item){
                                priceStr += " <small>"+getGoodsTypeText(item.goodsType)+":"+item.price+getPriceUnitText(item.unitId)+"</small>"
                                        +"        <br>";
                            });
                            priceStr +="<small>最低一票:"+item.minPrice+"元";
                            htmlStr += "<tr>"
                                    +"    <td>"+item.startLocation.locationName+"</td>"
                                    +"    <td>"+item.endLocation.locationName+"</td>"
                                    +"    <td>"+(item.isTwoWay==2?"双向":"单向")+"</td>"
                                    +"    <td>"+item.duration+"天</td>"
                                    +"    <td>"
+priceStr

                                    +"    </td>"
                                    +"    <td>"+(item.isRecommend==1?'是':'否')+"</td>"
                                    +"    <td>"+(item.status==1?'已审核':'未审核')+"</td>"
                                    +"    <td>"
                                    +"        <button data-my-line-id='"+item.id+"' class='btn btn-warning btn-line-detail'>查看详情</button>"
                                    +"        <button data-my-line-id='"+item.id+"'class='btn btn-danger btn-delete-line'>删除</button>"
                                    +"    </td>"
                                    +"</tr>";

                        });
                        $("#idLinesBody").html(htmlStr);
                        $("#idLinesBody").find(".btn-line-detail").click(function(){
                           var lineId = $(this).data("my-line-id")
                            window.location="${ctx}/workbench/line/detail?id="+lineId;
                        });

                        $('#idLinesBody').find(".btn-delete-line").unbind("click");
                        $("#idLinesBody").find(".btn-delete-line").click(function(){
                            var lineId = $(this).data("my-line-id")
                            deleteLine(lineId);
                        });


                    },
                    error: function (XMLHttpRequest, textStatus, errorThrown) {
                        // 通常 textStatus 和 errorThrown 之中
                        // 只有一个会包含信息
                        this; // 调用本次AJAX请求时传递的options参数
                    }
                });
            };


            showLinesList();

            var deleteLine = function(lineId){
                //先显示确认框
                showMyDialog("温馨提示","删除操作不可逆，请谨慎操作",function(){
                   var requestUrl ="${ctx}/workbench/line/delete";
                    var params ={"lineId":lineId};
                    $.get(requestUrl,params, function (result, textStatus, jqXHR) {
                            if(result.status==1){
                                showMyDialog("系统信息",result.message,null,'sm')
                            }else{
                                showLinesList();
                            }

                        },'json');

                },'sm',true);
            };

            var getGoodsTypeText = function(goodType){
                switch (goodType.toString()){
                    case '1':
                        return '重货整车';
                    case '2':
                        return '重货零担';
                    case '3':
                        return '泡货零担';
                }
            };

            var getPriceUnitText = function(unitCode){
                switch (unitCode.toString()){
                    case '1':
                        return '元/公斤';
                    case '2':
                        return '元/吨';
                    case '3':
                        return '元/立方';
                }
            };

            //------------------------------------------------------------------------------------------------
            //地图选择器
            var myRegionSelector = regionselector.init('divRegionSelector');
            myRegionSelector.click(function (param) {
                alert(param.value);

            });

            //始发地选择
            $('#btnStartLocation').click(function () {
                myRegionSelector.reset();
                $('#myRegionSelectorModal').modal();
                myRegionSelector.click(function (param) {
                    $('#inputStartLocation').val(param.text);
                    $('#inputStartLocationHidden').val(param.value);
                    $('#myRegionSelectorModal').modal('hide');

                });
            });

            //终点地选择
            $('#btnEndLocation').click(function () {
                myRegionSelector.reset();
                $('#myRegionSelectorModal').modal();
                myRegionSelector.click(function (param) {
                    $('#inputEndLocation').val(param.text);
                    $('#inputEndLocationHidden').val(param.value);
                    $('#myRegionSelectorModal').modal('hide');

                });
            });

        })
    </script>
</body>

</html>